<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>VirtualChat</title>
    <style>
        html{
          height: 100%;
        }

        body{
          height: 100%;
        }

        #app{
          height: 100%;
        }

        *,
        *::before,
        *::after {
          box-sizing: border-box;
          margin: 0;
          padding: 0;
        }

        ul,
        ol {
          list-style: none;
        }


        a{
          text-decoration: none;
          color: inherit; 
        }

        .textButton{
          padding: 5px;
          background-color: rgb(0, 0, 0,0);
          color: rgb(255, 255, 255,0.8);
          border: none;
          transition: all ease 0.3s;
          cursor: pointer;
        }

        .textButton:hover{
          color: rgb(0, 195, 255);
        }

        ::-webkit-scrollbar{
          width: 4px;
          height: 4px;
        }

        ::-webkit-scrollbar-track{
          background-color: rgb(255, 255, 255,0.3);
          border-radius: 20px;
          margin: 4px;
        }

        ::-webkit-scrollbar-thumb{
          background-color: rgb(0, 0, 0,0.2);
          border-radius: 20px;
          transition: all ease 0.9s;
        }

        ::-webkit-scrollbar-thumb:hover{
          background: rgb(0,0,0,0.3); /* 滑块 hover 后加深颜色 */
        }

        .flagText{
          margin: 10px;
          font-size: 90%;
          color: rgb(0, 0, 0,0.4);
          font-weight: 600;
          -webkit-user-select: none; /* Safari、Chrome 等 */
          -moz-user-select: none; /* Firefox */
          -ms-user-select: none; /* IE、Edge */
          user-select: none; /* 标准语法 */
        }

        .textWithIcon{
          display: flex;
          align-items: center;
          gap: 10px;
          font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
          font-weight: 500;
        }

        .no-copy {
          /* 禁止文本选择（兼容各浏览器） */
          -webkit-user-select: none; /* Safari、Chrome 等 */
          -moz-user-select: none; /* Firefox */
          -ms-user-select: none; /* IE、Edge */
          user-select: none; /* 标准语法 */
        }

        .divDisappear{
          -webkit-user-select: none; /* Safari、Chrome 等 */
          -moz-user-select: none; /* Firefox */
          -ms-user-select: none; /* IE、Edge */
          user-select: none; /* 标准语法 */
          pointer-events: none; 
          opacity: 0.5;
        }

        .buttonIcon{
          background-color: rgb(0, 0, 0,0);
          border-radius: 5px;
          cursor: pointer;
          transition: all ease 0.3s;
        }

        .buttonIcon:hover{
          background: rgb(0, 0, 0,0.3);

        }
    </style>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>
